<template>
  <div>
    <el-row style="justify-content: end">
      <div>
        <span style="
            display: inline-block;
            vertical-align: middle;
            width: 15px;
            height: 15px;
            background-color: rgb(212, 0, 255);
          "></span>
        <span style="
            display: inline-block;
            vertical-align: middle;
            font-size: 15px;
            margin-left: 8px;
          ">历史数据比较异常颜色</span>
      </div>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="检测项目："><span v-html="proxy.getSupAndSub(jcForm.jcxmName)"></span></el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="检测点位：">{{ jcForm.pointName }}</el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="批次：">每{{ jcForm.sampleCount }}天{{ jcForm.sampleDay }}次</el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-form :model="jcForm" ref="jcRef" @submit.native.prevent>
          <el-form-item label="统计数量：" :rules="{
            required: true,
            trigger: ['blur', 'change'],
            message: '统计数量必填',
          }" prop="count">
            <el-col :span="2">近</el-col>
            <el-col :span="12">
              <el-input-number clearable :min="1" style="width: 100%" controls-position="right" v-model="jcForm.count" />
            </el-col>
            <el-col :span="3"><el-row style="justify-content: center">次</el-row></el-col>
            <el-col :span="6"><el-row style="justify-content: center"><el-button type="success"
                  @click="handleTj">统计</el-button></el-row></el-col>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8">
        <el-row style="justify-content: center">
          <el-radio :label="1" v-model="jcForm.flag">同频次</el-radio>
          <el-radio :label="2" v-model="jcForm.flag">同点位</el-radio>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="最小值：">{{ tjForm.minValue }}</el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="最大值：">{{ tjForm.maxValue }}</el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="平均值：">{{ tjForm.avgValue }}</el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <p class="pinformation">历史数据</p>
      <p class="totalStyle">共 {{ total }} 条数据</p>
    </el-row>
    <el-table :data="tjForm.projectList">
      <el-table-column prop="value" label="检测值" align="center" show-overflow-tooltip />
      <el-table-column prop="cyDate" label="检测时间" align="center" show-overflow-tooltip width="100" />
      <el-table-column label="频次" align="center" width="90">
        <template #default="scope">每{{ scope.row.sampleCount }}天{{ scope.row.sampleDay }}次</template>
      </el-table-column>
      <el-table-column label="原始记录" align="center" width="90">
        <template #default="scope">
          <el-button link @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <checkDialog ref="checkRef" @close="close"></checkDialog>
  </div>
</template>

<script setup>
import { getJcForm, getProjectList } from "@/api/dataAnalysis/selectProject";
import checkDialog from "@/views/lab/labTask/checkDialog";
import { nextTick } from "vue";

const { proxy } = getCurrentInstance();

const total = ref(0);
const jcForm = ref({});
const sJId = ref("");

const checkRef = ref(null)

const props = defineProps({
  sJId: {
    type: String,
  },
});

function getForm() {
  nextTick(() => {
    sJId.value = props.sJId;
    tjForm.value.projectList = []
    total.value = 0;
    let tempForm = JSON.parse(JSON.stringify(jcForm.value));
    getJcForm(sJId.value).then((res) => {
      jcForm.value = res.data;
      jcForm.value.flag = tempForm.flag ? tempForm.flag : 1;
      jcForm.value.count = tempForm.count ? tempForm.count : 1;
      nextTick(() => {
        handleTj()
      })
    });
  });
}

const emits = defineEmits(["getColor"])

const tjForm = ref({ projectList: [] });

function handleTj() {
  proxy.$refs["jcRef"].validate((valid) => {
    if (valid) {
      getProjectList(jcForm.value).then((res) => {
        tjForm.value = res.data;
        
        // 更改颜色   data数据是  数组 内容是  需要变色的relId   class是样式
        if (tjForm.value.relId) {
          emits("getColor", { data: [{ relId: tjForm.value.relId }], class: "hisColor" })
        } else {
          emits("getColor", { data: [], class: "hisColor" })
        }
        if (tjForm.value.projectList) {
          total.value = tjForm.value.projectList.length;
        } else {
          tjForm.value.projectList = [];
          total.value = 0;
        }
      });
    }
  });
}

function close(val) {
}

function handleView(row) {
  checkRef.value.handleCheck(row.lMId)
}

defineExpose({
  getForm,
});
</script>
